<template>
  <h1 class="title">确定订单</h1>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="充值产品" align="center">
      <template #default="{ row }">
        <img :src="row.imageUrl" alt="" width="40px" height="40px" />
        <span style="color: orangered">{{ row.productName }}</span>
        <p>{{ row.description }}</p>
      </template>
    </el-table-column>

    <el-table-column
      prop="price"
      label="单价"
      style="color: red"
      align="center"
    ></el-table-column>

    <el-table-column prop="address" label="数量" align="center">
      <el-input-number
        v-model="num"
        :min="1"
        :max="30"
        @change="handleChange"
      />
    </el-table-column>
    <el-table-column prop="address" label="小计" align="center">
      {{ total }}
    </el-table-column>
  </el-table>

  <div class="box">
    <b>
      实付款:
      <span style="font-size: 30px">¥</span>
      <span style="color: red; font-size: 30px">{{ total }}</span>
    </b>
    <h1>
      充值详情:
      <span style="color: orangered">{{ tableData[0].description }}</span>
    </h1>
    <h1>
      充值账户:
      <span style="color: red">{{ useStore.userInfo.nickname }}</span>
    </h1>
    <button @click="handleclick(row)">提交订单</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import * as api from '../../../api/vip';
import { useUser } from '../../../store/users';
let useStore = useUser();
let route = useRoute();
let router = useRouter();
//声明数量的初始值
let num = ref(1);
//计算总价
let total = ref();
// 产品的id
let product_id = route.query.product_id;
//发送请求获取订单信息
let tableData = ref();
api.OrderApi(product_id).then((res) => {
  // console.log(res);
  tableData.value = res.data.data;
  console.log(tableData.value);
  total.value = tableData.value[0].price * num.value;
});

//计数器事件
let handleChange = () => {
  total.value = tableData.value[0].price * num.value;
};

//点击提交按钮跳转二维码支付页面
let handleclick = () => {
  ElMessageBox({
    title: '确认订单',
    message: '您是否确定购买此订单',
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    showCancelButton: true
  })
    .then(async () => {
      try {
        let res = await api.payMentApi(product_id, num.value);
        let order_id = res.data.order_id;
        router.push('/pay/payMent?order_id=' + order_id);
      } catch (e) {
        console.log(e);
      }
    })
    .catch(() => {
      ElMessage.warning('您已取消购买');
    });
};
</script>

<style scoped>
.title {
  margin: 70px 0 20px 80px;
}
.box {
  width: 700px;
  height: 100px;
  border: 1px solid orange;
  float: right;
}
button {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  background-color: red;
  border: none;
  position: relative;
  left: 500px;
  top: 15px;
}
b,
h1 {
  display: block;
  text-align: right;
}
img {
  width: 40px !important;
}
</style>
